<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>登录</title>
	<link rel="icon" href="">
	<link rel="stylesheet" type="text/css" href="/static/css/aui.css" />
	<script type="text/javascript">
	    function imgPreview(fileDom){
	        //判断是否支持FileReader
	        if (window.FileReader) {
	            var reader = new FileReader();
	        } else {
	            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
	        }

	        //获取文件
	        var file = fileDom.files[0];
	        var imageType = /^image\//;
	        //是否是图片
	        if (!imageType.test(file.type)) {
	            alert("请选择图片！");
	            return;
	        }
	        //读取完成
	        reader.onload = function(e) {
	            //获取图片dom
	            var img = document.getElementById("preview");
	            //图片路径设置为读取的图片
	            img.src = e.target.result;
	        };
	        reader.readAsDataURL(file);
	    }
    </script>
</head>
<body>
<!-- 头部 -->
	<header class="aui-bar aui-bar-nav" id="wrap" style="background-color: #00bcd4">
		<a class="aui-pull-left aui-btn" href="{% url 'mycampus:index' %}">
	        <span class="aui-iconfont"></span>取消
	    </a>
	    <div class="aui-title">发帖子</div>
	</header>
	<section class="aui-content-padded">
	    <div class="aui-card-list">
	    	<form role="form" action="{% url 'mycampus:show_published' %}" method="post" enctype="multipart/form-data" onsubmit="return check()">
	        	{% csrf_token %}
		        <div class="aui-card-list-header">
			            
					    
					    <input type="file" name="image" onchange="imgPreview(this)" />
		        </div>
	        	
		        <div class="aui-card-list-content-padded">
		        	<img id="preview" /><br/>
		            <textarea id="title" placeholder="标题..." name="title" onblur="return cheack_title()"></textarea>
		            </span><span id="erroretitle" style="display:none;color:red;">标题不能为空！</span>
		            <textarea id="content" placeholder="分享新鲜事..." name="content" onblur="return cheack_content()"></textarea>
		            </span><span id="errorcontent" style="display:none;color:red;">内容不能为空！</span>
		        </div>
		        <div class="aui-card-list-footer">
		              <!-- <p><div type="submit" class="aui-btn aui-btn-primary aui-btn-block">发表</button></p> -->
		              <button type="submit" type="button" class="aui-btn aui-btn-primary">发表</button>
		              <!-- <p><div class="aui-btn aui-btn-info aui-btn-block" style="width:70%;margin-left: 15%;background-color: #00bcd4 !important" onclick="ajax_request()">登录</div>
       				 </p> -->
		              <!-- <button type="submit" class="btn btn-primary block full-width m-b">注 册</button> -->
		        </div>
	        </from>
	    </div>
	</section>
	<section class="aui-content-padded">
		
	</section>
	<script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="/static/js/aui-popup.js" ></script>
	<script type="text/javascript" src="/static/js/api.js"></script>
	<script type="text/javascript">
	    apiready = function(){
	        if(api.systemType == 'ios'){
	            scaleEnabled = true;
	            document.getElementById('wrap').style.paddingTop = '12px';
	        }
	        };
	</script>
	<script type="text/javascript">
		function cheack_title(){
			var title = document.getElementById('title').value;
			if (title == '' || title==undefined ||title==null|| content == ''||content==undefined||content==null) {
			document.getElementById('erroretitle').style.display = "block";
			return false;
			}
			else{
				document.getElementById('erroretitle').style.display = "none";
				return true;
			}
		}
		function cheack_content(){
			var content = document.getElementById('content').value;
			if (content == ''||content==undefined||content==null) {
				document.getElementById('errorcontent').style.display = "block";
				return false;
		    }
		    else{
		    	document.getElementById('errorcontent').style.display = "none";
		    	return true;
		    }
		}
		function check(){
			if(!cheack_title() || !cheack_content() ){
				return false;
			}
			else{
				return true;
			}
		}
		
	</script>
</body>
</html>